<!-- 个人信息主页 -->
<template>
  <div class="personal">
    <div class="p-header">
      <!-- 个人信息部分 -->
      <div class="personal-info">
        <!-- 头像 -->
        <div @click="showDialogTable">
          <el-image
            class="personal-img"
            fit="contain"
            :src="attachImageUrl(userPic)"
          />
        </div>
        <!-- 用户名和个人介绍 -->
        <div class="personal-msg">
          <div class="username">{{ personalInfo.username }}</div>
          <div class="introduction">{{ personalInfo.introduction }}</div>
          <div class="introduction">
            {{ "生日" + formatDate(personalInfo.birth) }}
          </div>
          <div class="introduction">
            {{ "故乡" + personalInfo.location }}
          </div>
        </div>
        <!-- 跳转到修改页面 -->
        <el-button class="edit-info" round :icon="Edit" @click="goPage()"
          >修改个人信息</el-button
        >
      </div>
      <div class="card" @click="goAblum()">
        <div class="icon">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            height="38px"
            width="38px"
            version="1.1"
            id="heart"
            viewBox="0 0 471.701 471.701"
            xml:space="preserve"
          >
            <linearGradient id="gradientColor">
              <stop offset="5%" stop-color="#7eaaff"></stop>
              <stop offset="95%" stop-color="#ff48fb"></stop>
            </linearGradient>
            <g>
              <path
                d="M433.601,67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7,13.6-92.4,38.3l-12.9,12.9l-13.1-13.1   c-24.7-24.7-57.6-38.4-92.5-38.4c-34.8,0-67.6,13.6-92.2,38.2c-24.7,24.7-38.3,57.5-38.2,92.4c0,34.9,13.7,67.6,38.4,92.3   l187.8,187.8c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-3.9l188.2-187.5c24.7-24.7,38.3-57.5,38.3-92.4   C471.801,124.501,458.301,91.701,433.601,67.001z M414.401,232.701l-178.7,178l-178.3-178.3c-19.6-19.6-30.4-45.6-30.4-73.3   s10.7-53.7,30.3-73.2c19.5-19.5,45.5-30.3,73.1-30.3c27.7,0,53.8,10.8,73.4,30.4l22.6,22.6c5.3,5.3,13.8,5.3,19.1,0l22.4-22.4   c19.6-19.6,45.7-30.4,73.3-30.4c27.6,0,53.6,10.8,73.2,30.3c19.6,19.6,30.3,45.6,30.3,73.3   C444.801,187.101,434.001,213.101,414.401,232.701z"
              ></path>
            </g>
          </svg>
        </div>
        <p class="title">Favourites</p>
        <p class="text">Check all your favourites in one place.</p>
      </div>
    </div>

    <div class="gap">
      <button @click="showCreate = !showCreate">
        <span class="circle1"></span>
        <span class="circle2"></span>
        <span class="circle3"></span>
        <span class="circle4"></span>
        <span class="circle5"></span>
        <span class="text">创建歌单</span>
      </button>
      <p class="mid">我的歌单</p>
      <button @click="showUpload = !showUpload">
        <span class="circle1"></span>
        <span class="circle2"></span>
        <span class="circle3"></span>
        <span class="circle4"></span>
        <span class="circle5"></span>
        <span class="text">上传歌曲</span>
      </button>
    </div>
    <div class="list">
      <!-- 喜欢歌单 -->
      <!-- <div class="card-frame">
      <div class="card" @click="goAblum()">
        <el-image
          class="card-img"
          fit="contain"
          :src="attachImageUrl(`/img/songPic/yedediqizhang.jpg`)"
        />
      </div>
      <p class="card-name">喜欢歌单</p>
    </div> -->

      <!-- 用户创建歌单 -->
      <!-- <create-song-sheet @upload-list="updateList"></create-song-sheet> -->
      <!-- 上传歌曲 -->
      <!-- <upload-song></upload-song> -->
      <!-- 申请演出 -->
      <!-- <apply-perform></apply-perform> -->
      <play-list
        :playList="playList"
        path="song-sheet-detail"
        :isFav="false"
      ></play-list>
    </div>
    <!-- 歌曲列表 -->
    <!-- <div class="personal-body" v-show="showHeart">
      <song-list
        :songList="collectSongList"
        :show="true"
        @changeData="changeData"
      ></song-list>
    </div> -->

    <!-- 修改头像 -->

    <div
      :class="{ 'bj-detail-body': dialogTableVisible }"
      @click.self="dialogTableVisible = !dialogTableVisible"
    >
      <upload v-show="dialogTableVisible"></upload>
    </div>
    <div
      :class="{ 'bj-detail-body': showCreate }"
      @click.self="showCreate = !showCreate"
    >
      <create-song-sheet
        @upload-list="updateList"
        v-show="showCreate"
      ></create-song-sheet>
    </div>
    <div
      :class="{ 'bj-detail-body': showUpload }"
      @click.self="showUpload = !showUpload"
    >
      <upload-song v-show="showUpload"></upload-song>
    </div>
    <div class="button-bar"></div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  nextTick,
  ref,
  computed,
  watch,
  reactive,
  getCurrentInstance,
  onMounted,
} from "vue";
import { useStore } from "vuex";
import { Edit } from "@element-plus/icons-vue";
import SongList from "@/components/SongList.vue";
import Upload from "../setting/Upload.vue";
import mixin from "@/mixins/mixin";
import { HttpManager } from "@/api";
import { RouterName } from "@/enums";
import { Icon } from "@/enums";
import PlayList from "@/components/PlayList.vue";
import CreateSongSheet from "@/views/song-sheet/CreateSongSheet.vue";
import UploadSong from "@/views/singer/UploadSong.vue";
import { formatDate } from "@/utils";

export default defineComponent({
  components: {
    // SongList,
    CreateSongSheet,
    Upload,
    PlayList,
    UploadSong,
  },
  setup() {
    const store = useStore();
    const { routerManager } = mixin();

    const collectSongList = ref([]); // 收藏的歌曲
    const personalInfo = reactive({
      username: "",
      userSex: "",
      birth: "",
      location: "",
      introduction: "",
    });
    const userId = computed(() => store.getters.userId);
    const userPic = computed(() => store.getters.userPic);
    const dialogTableVisible = ref(false);
    const { proxy } = getCurrentInstance();

    const showCreate = ref(false);
    const showUpload = ref(false);

    //歌单列表
    const playList = ref([]);

    //当头像改变，修改框关闭
    watch(userPic, () => {
      dialogTableVisible.value = false;
    });
    function showDialogTable() {
      if (dialogTableVisible.value == false) dialogTableVisible.value = true;
      else dialogTableVisible.value = false;
    }

    //跳转到信息修改页面
    function goPage() {
      routerManager(RouterName.Setting, { path: RouterName.Setting });
    }

    //根据当前的用户id获得用户详细信息
    async function getUserInfo(id) {
      const result = (await HttpManager.getUserOfId(id)) as ResponseBody;
      personalInfo.username = result.data[0].username;
      personalInfo.userSex = result.data[0].sex;
      personalInfo.birth = result.data[0].birth;
      personalInfo.introduction = result.data[0].introduction;
      personalInfo.location = result.data[0].location;
    }

    //获取播放列表
    async function getUserSongList(value) {
      if (!value) return;
      const result = (await HttpManager.getUserSongList(value)) as ResponseBody;

      playList.value = result.data;
      console.log(playList.value);
    }

    //在点击之前首先进行数据的获取
    onMounted(() => {
      // getSearchList(proxy.$route.query.keywords);
      getUserSongList(proxy.$store.getters.userId);
    });

    // 获取收藏的歌曲
    async function getCollection(userId) {
      collectSongList.value = [];
      const result = (await HttpManager.getCollectionOfUser(
        userId
      )) as ResponseBody;
      const collectIDList = result.data || []; // 存放收藏的歌曲ID
      // 通过歌曲ID获取歌曲信息
      for (const item of collectIDList) {
        const result = (await HttpManager.getSongOfId(
          item.songId
        )) as ResponseBody;
        collectSongList.value.push(result.data[0]);
      }
    }

    //跳转到喜欢页面
    function goAblum() {
      routerManager("fav-song-detail", {
        path: `/fav-song-detail/${store.getters.userId}`,
      });
    }

    function changeData() {
      getCollection(userId.value);
    }

    nextTick(() => {
      getUserInfo(userId.value);
      getCollection(userId.value);
    });

    //更新歌单
    async function updateList() {
      console.log("歌单更新");
      await getUserSongList(proxy.$store.getters.userId);
    }

    return {
      BOFANG: Icon.BOFANG,
      Edit,
      userPic,
      dialogTableVisible,
      collectSongList,
      personalInfo,
      playList,
      showCreate,
      showUpload,
      updateList,
      attachImageUrl: HttpManager.attachImageUrl,
      goPage,
      changeData,
      showDialogTable,
      formatDate,
      goAblum,
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/assets/css/var.scss";
@import "@/assets/css/personal.scss";
.bj-detail-body {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(15px);
}
.bar {
  padding-bottom: 50px;
}
</style>
